{% extends 'IcsocUIBundle::base.html.twig' %}

{% block content %}
    <div class="widget-main">
        <!-- #section:plugins/fuelux.spinner -->
        <input type="text" class="input-mini" id="spinner1" />
        <div class="space-6"></div>

        <input type="text" class="input-mini" id="spinner2" />
        <div class="space-6"></div>

        <input type="text" class="input-mini" id="spinner3" />

        <!-- /section:plugins/fuelux.spinner -->
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@spinner_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        jQuery(function($){
            $('#spinner1').ace_spinner({value:0,min:0,max:200,step:10, btn_up_class:'btn-info' , btn_down_class:'btn-info'})
                    .on('change', function(){
                        ///alert(this.value)
                    });
            $('#spinner2').ace_spinner({value:0,min:0,max:10000,step:100, touch_spinner: true, icon_up:'ace-icon fa fa-caret-up', icon_down:'ace-icon fa fa-caret-down'});
            $('#spinner3').ace_spinner({value:0,min:-100,max:100,step:10, on_sides: true, icon_up:'ace-icon fa fa-plus smaller-75', icon_down:'ace-icon fa fa-minus smaller-75', btn_up_class:'btn-success' , btn_down_class:'btn-danger'});

        });
    </script>
{% endblock %}